<template>
    <view class="timetable-main text-gray" :style="[bgImageStyle]">
        <MsgBox ref="msgBox"></MsgBox>
        <modal v-if="isShow" title="日程表" confirm-text="确定" cancel-text="取消" @cancel="$event => isShow = false"
            @confirm="$event => bbShow()">
            <view class="list">
                <span class="list1">日程</span>
                <input class="list-input" type="text" id="list2" placeholder="请输入日程名" v-model="new1">
                <br />
            </view>
            <view class="list">
                <span class="list1">日期</span>
                <picker :value="index" @change="bindPickerChange" :range="air">
                    <view style=" background-color: #fff;">星期{{ air[index] }}</view>
                </picker>
                <br />
            </view>
            <view class="list">
                <span class="list1">节次</span>
                <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
                    :range="multiAir">
                    <view style="background-color: #fff;">
                        第{{ multiAir[0][multiIndex[0]] }}-{{ multiAir[1][multiIndex[1]] }}节
                    </view>
                </picker>
                <br />
            </view>
        </modal>

        <view class="container">
            <uni-popup ref="popup" background-color="#fff" @change="change">
                <button type="default" @click="aaShow()">添加日程</button>
                <button type="default" @click="changeTimeMode()">切换{{ timeMode == 2 ? "崂山" : "西海岸" }}时间</button>
                <button type="default" @click="this.$refs.popup.close()">取消</button>
            </uni-popup>
        </view>

        <view class="timetable-fixed" :style="[bgImageStyle, { 'padding-top': customBar + '' }]">
            <!-- 周数切换 -->
            <view class="timetable-week" v-if="showTimetableWeek">
                <scroll-view class="week-nav" scroll-x scroll-with-animation :scroll-left="scrollLeft">
                    <view class="week-item" v-for="(weekTimetable, weekIndex) in timetableList" :key="weekIndex">
                        <view class="item-main" :class="
                            originalWeekIndex === weekIndex
                                ? 'original'
                                : currentWeekIndex === weekIndex
                                    ? 'current'
                                    : ''
                        " @click="$store.commit('timetable/setCurrentWeekIndex', weekIndex)">
                            <view class="main-week">第{{ weekIndex + 1 }}周</view>
                            <view class="main-body">
                                <block v-for="(dayTimetable, dayIndex) in weekTimetable" :key="dayIndex">
                                    <view v-if="dayIndex < 5" class="body-item">
                                        <block v-for="(timeTimetable, timeIndex) in dayTimetable" :key="timeIndex">
                                            <view class="item-dot" :class="timeTimetable.length >= 1 ? 'true' : 'false'">
                                            </view>
                                        </block>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <!-- 课表时间头 -->
            <view class="timetable-time">
                <view class="timetable-time-left">
                    <text>{{ `${currentMonth}\n月` }}</text>
                </view>
                <view class="timetable-time-right">
                    <block v-for="(item, index) in currentWeekdDayArray" :key="index">
                        <view class="day-item">
                            <text :class="
                                originalWeekIndex === currentWeekIndex && weekWeekIndex === index
                                    ? 'cur'
                                    : ''
                            ">
                                {{ `周${weekTitle[index]}\n` }}
                                <text style="font-size: 20rpx;">{{ `${item ? item : '00'}日` }}</text>
                            </text>
                        </view>
                    </block>
                </view>
            </view>
        </view>

        <!-- 课表主体区域 -->
        <view class="timetable-body" style=" padding-top : 80rpx;" @touchstart="touchStart" @touchmove="touchMove"
            @touchend="touchEnd">
            <!-- 课表左侧时间 -->
            <view class="timetable-body-left">
                <view class="timetable-body-left-time" v-for="(item, index) in 12" :key="index">
                    <text>
                        {{ index + 1 }}\n
                        <text style="font-size: 18rpx;">
                            {{ `${classTime[index].s}\n${classTime[index].e}` }}
                        </text>
                    </text>
                </view>
            </view>
            <!-- '''''' -->


            <!-- 课表主体 -->
            <view class="timetable-body-right">

                <block v-for="(dayTimetable, weekIndex) in timetableList[currentWeekIndex]" :key="weekIndex">
                    <block v-for="(dayItem, dayIndex) in dayTimetable" :key="dayIndex">
                        <view class="timetable-item" :class="!dayItem.length ? 'blank' : ''" :style="
                            'margin-left:' + weekIndex * 13.0 + 'vw;margin-top:' + dayIndex * 1 * 120 + 'rpx;'
                        " @click="showCourseDetail(dayItem)">
                            <view v-if="dayItem.length" class="timetable-item-content" :style="
                                'height:' +
                                (dayItem[0].duration * 120 - 8) +
                                'rpx;background-color:' + (dayItem[0].hasClass ?
                                    getCourseColor(dayItem[0].title) : '#808080') +
                                ';'
                            ">
                                <view v-if="dayItem.length > 1" class="twice-course"></view>
                                <text>
                                    <text style="font-size: 24rpx;">{{ parserCourseTitle(dayItem[0].title) }}</text>
                                    {{ `\n@${dayItem[0].location}` }}
                                </text>
                            </view>
                        </view>
                    </block>
                </block>
            </view>
        </view>
        <!-- 课表卡片 -->
        <view class="course-card" v-if="showCourseCard">
            <view class="mask" @click="showCourseCard = !showCourseCard"></view>
            <view class="course-item" v-for="(courseItem, courseItemIndex) in courseCardData" :key="courseItemIndex"
                :style="'background-color:' + getCourseColor(courseItem.title)">
                <view class="course-title">{{ courseItem.title }}</view>
                <view class="course-other">
                    <view class="course-other-item">
                        <text class="cIcon-location">
                            地点：{{ courseItem.location ? courseItem.location : '无' }}
                        </text>
                    </view>
                    <!-- <view class="course-other-item">
                        <text class="cIcon-people">{{ courseItem.teacher ? courseItem.teacher : '无' }}</text>
                    </view> -->
                    <view class="course-other-item">
                        <text class="cIcon-time">时间：{{ courseItem.time ? courseItem.time : '无' }}</text>
                    </view>
                    <view class="course-other-item">
                        <text class="cIcon-evaluate" style="margin-right: 20rpx;">
                            {{ `教师：${courseItem.teacher ? courseItem.teacher : '无'}` }}
                        </text>
                        <text class="cIcon-favor">
                            {{ `状态：${courseItem.state ? courseItem.state : '无'}` }}
                        </text>
                    </view>
                </view>
                <view class="course-action">
                    <button v-show="courseItem.time=='无'" class="button1" @click="delateItem(courseItem)">删除日程</button>
                    <!-- <view class="title" v-if="courseItemIndex === 0">已置顶</view>
                    <view class="title" v-else @click="setCourseItemTop(courseItem, courseItemIndex)">
                        置顶
                    </view> -->
                    <view class="cuIcon-write"></view>
                    <view class="cuIcon-backdelete" @click="deleteCourseItem(courseItem, courseItemIndex)"></view>
                </view>
            </view>
        </view>
    </view>
</template>
  
<script>
import { mapState, mapGetters } from 'vuex';
import MsgBox from './../../components/MsgBox/MsgBox.vue'

export default {
    name: 'timetableBody',
    components: { MsgBox },
    data() {
        return {


            air: ['1', '2', '3', '4', '5', '6', '7'],
            index: 0,

            multiAir: [['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']],
            multiIndex: [0, 0],

            new1: "",
            new2: "",
            new3: "",
            new4: "",
            isShow: false,
            showAdd: false,
            customBar: this.customBar,
            statusBar: this.statusBar,
            weekTitle: ['一', '二', '三', '四', '五', '六', '日'],
            colorMap: new Map(),
            startX: 0,
            towards: 0,
            // 课表详情卡片
            showCourseCard: false,
            courseCardData: null,
            timetableData: [],
            timeMode: 1,
            aab: false,
            richeng: [] // 自定义的日程
        };
    },
    onShow() {
        this.timeMode = uni.getStorageSync("timeMode") || 1

        // // 设置开学时间
        let date = new Date()
        this.$store.commit('timetable/setStartDay', this.getFirstDayOfWeek(date) + ' 00:00:00')
        console.log(this.getFirstDayOfWeek(date));
        this.timetableData = [this.toTimeTable(uni.getStorageSync("courseTable"))]
        // // 初始化课表数据
        this.$store.commit('timetable/setTimetableList', this.timetableData)

        this.loadRicheng()



        console.log(this.timetableData);
        console.log(this.timetableData);
        uni.request({
            url: 'https://tomato.daoxuan.cc/timetable/',
            header: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                "Authorization": "Bearer " + uni.getStorageSync('login').access
            },
            method: 'GET',
            sslVerify: true,
            success: ({ data, statusCode, header }) => {
                if (statusCode == 200) {
                    this.timetableData = [this.toTimeTable(data)]
                    // this.$store.commit('timetable/setTimetableList', this.timetableData)
                    this.loadRicheng()
                }

            },
        })

    },
    computed: {
        ...mapState('timetable', [
            'timetableList',
            'showTimetableWeek',
            'classTime',
            'colorArray',
            'colorArrayIndex',
            'bgImage',
        ]),
        ...mapGetters('timetable', [
            'originalWeekIndex',
            'currentWeekIndex',
            'weekWeekIndex',
            'currentMonth',
            'currentWeekdDayArray',
        ]),
        // 课程背景样式
        bgImageStyle: function () {
            const style = {
                'background-color': '#FFFFFF',
            };
            if (this.bgImage) {
                Object.assign(style, {
                    color: '#FFFFFF',
                    'background-image': `url(${this.bgImage})`,
                });
            }
            return style;
        },
        // 周切换移动动画
        scrollLeft() {
            if (this.showTimetableWeek) {
                if (this.originalWeekIndex === this.currentWeekIndex) {
                    return this.originalWeekIndex * 60;
                }
                return this.currentWeekIndex * 60;
            }
        },
    },
    watch: {
        timetableList(newVal, oldVal) {
            // 清除课程颜色缓存
            this.colorMap.clear();
        },
        colorArrayIndex(newVal, oldVal) {
            // 清除课程颜色缓存
            this.colorMap.clear();
        },
        timeMode(newVal, oldVal) {
            this.$store.commit('timetable/setClassTime', newVal == 1 ? [{ 's': '08:00', 'e': '08:50' },
            { 's': '09:00', 'e': '09:50' },
            { 's': '10:10', 'e': '11:00' },
            { 's': '11:10', 'e': '12:00' },
            { 's': '13:30', 'e': '14:20' },
            { 's': '14:30', 'e': '15:20' },
            { 's': '15:30', 'e': '16:20' },
            { 's': '16:30', 'e': '17:20' },
            { 's': '17:30', 'e': '18:20' },
            { 's': '18:30', 'e': '19:20' },
            { 's': '19:30', 'e': '20:20' },
            { 's': '20:30', 'e': '21:20' }] :
                [{ 's': '08:30', 'e': '09:20' },
                { 's': '09:25', 'e': '10:15' },
                { 's': '10:30', 'e': '11:20' },
                { 's': '11:25', 'e': '12:15' },
                { 's': '13:30', 'e': '14:20' },
                { 's': '14:30', 'e': '15:20' },
                { 's': '15:30', 'e': '16:20' },
                { 's': '16:30', 'e': '17:20' },
                { 's': '17:30', 'e': '18:20' },
                { 's': '18:30', 'e': '19:20' },
                { 's': '19:30', 'e': '20:20' },
                { 's': '20:30', 'e': '21:20' }])
        }
    },
    onPullDownRefresh() {
        // uni.startPullDownRefresh();
        //下面是下拉刷新页面的相关代码
        //...
        uni.stopPullDownRefresh();
        let date = new Date()
        this.$store.commit('timetable/setStartDay', this.getFirstDayOfWeek(date) + ' 00:00:00')
        uni.request({
            url: 'https://tomato.daoxuan.cc/timetable/',
            header: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                "Authorization": "Bearer " + uni.getStorageSync('login').access
            },
            method: 'GET',
            sslVerify: true,
            success: ({ data, statusCode, header }) => {
                if (statusCode == 200) {
                    this.loadRicheng()
                    this.timetableData = [this.toTimeTable(data)]
                    this.$store.commit('timetable/setTimetableList', this.timetableData)
                    this.$refs.msgBox.showMsg(2, "刷新成功");
                } else {
                    this.$refs.msgBox.showMsg(1, "刷新失败");
                }
            },
        })

    },
    methods: {
        delateItem(item) {
            for (let i = 0; i < 7; i++) { // 寻找星期几的课
                for (let j = 0; j < 12; j++) { // 寻找第几节的课
                    if (item.start == j && item.day == i) {
                        for (let k = 0; k < this.timetableData[0][i][j].length; k++) { // 不能把原来的课表删了吧，匹配标题
                            if (this.timetableData[0][i][j][k].title == item.title) {
                                this.timetableData[0][i][j].splice(k, 1)
                                if (this.timetableData[0][i][j].length == 0) {
                                    this.showCourseCard = !this.showCourseCard // 如果删了以后没课了，就关掉卡片
                                }
                                for (let i = 0; i < this.richeng.length; i++) { // 然后把this.richeng的也删了
                                    if (this.richeng[i].title == item.title) {
                                        this.richeng.splice(i,1)
                                        uni.setStorageSync("richeng",this.richeng)
                                        return
                                    }
                                }
                            }
                        }

                    }
                }
            }

        },

        loadRicheng() {
            uni.getStorage({
                key: 'richeng',
                success: ({ data }) => {
                    this.richeng = data
                    console.log("this.richeng", this.richeng);
                    for (let i = 0; i < this.richeng.length; i++) {
                        for (let day = 0; day < 7; day++) {
                            if (this.richeng[i].day == day) {
                                for (let start = 0; start < 12; start++) {
                                    if (this.richeng[i].start == start) {

                                        console.log(this.richeng[i]);
                                        this.timetableData[0][day][start].push(this.richeng[i])
                                    }
                                }
                            }
                        }
                    }
                },
            })
        },
        bindPickerChange: function (e) {
            this.index = e.detail.value;
        },

        bindMultiPickerColumnChange: function (e) {
            this.multiIndex[e.detail.column] = e.detail.value;
            this.multiIndex.splice(0, 0)
        },

        red() {
            uni.setStorageSync('new1', 'air[index]', 'multiAir[1]-multiAir[0]'),
                uni.getStorageSync('new1', 'air[index]', 'multiAir[1]-multiAir[0]');
        },

        // local(){
        //     uni.getStorageSync('new1','air[index]','multiAir[1]-multiAir[0]')
        // },
        changeTimeMode() {
            if (this.timeMode == 1) {
                this.timeMode = 2
                uni.setStorageSync("timeMode", 2)
                this.$refs.popup.close()
            } else {
                this.timeMode = 1
                uni.setStorageSync("timeMode", 1)
                this.$refs.popup.close()
            }
        },

        aaShow() {
            this.isShow = true,
                this.$refs.popup.close()
        },

        bbShow() {
            
            this.red();

            let classTemp = {
                "title": this.new1,
                "state": '无',
                "teacher": '无',
                "time": '无',
                "location": '无',
                "start": Number(this.multiAir[0][this.multiIndex[0]] - 1),
                "duration": this.multiAir[1][this.multiIndex[1]] - this.multiAir[0][this.multiIndex[0]] + 1,
                "hasClass": true,
                // "qwq": true,
                "day": Number(this.index) //星期几的课
            }
            if(classTemp.duration<=0){
                this.$refs.msgBox.showMsg(1,"课程时长必须是正数")
                return
            }
            if(classTemp.title==""){
                this.$refs.msgBox.showMsg(1,"必须输入日程标题")
                return
            }
            this.isShow = false;
            //    this.aab=classTemp.qwq;
            //    console.log(this.aab);
            //    console.log(classTemp.qwq);
            // console.log(this.multiAir[0][this.multiIndex[0]], this.multiAir[1][this.multiIndex[1]]);
            this.timetableData[0][classTemp.day][classTemp.start].push(classTemp)
            this.$store.commit('timetable/setTimetableList', this.timetableData)

            // this.richeng.push(classTemp)
            this.richeng.push(classTemp)
            uni.setStorageSync("richeng", this.richeng)
            //plumage
            // this.ccShow()
        },
        // bbShow(){
        //     this.isShow=false,
        //     this.new(),
        //     // console.log(this.multiAir[0][this.multiIndex[0]],this.multiAir[1][this.multiIndex[1]]);
        //     this.timetableData[0][this.air[this.index]-1][this.multiAir[1][this.multiIndex[1]]-this.multiAir[0][this.multiIndex[0]]].push({
        //         "title":this.new1,
        //         "state":'1',
        //         "teacher":'2',
        //         "time":'3',
        //         "location":'4',
        //         "start":'6',
        //         "duration":2*[this.multiAir[1][this.multiIndex[1]]-this.multiAir[0][this.multiIndex[0]]],
        //         "hasClass":'66'

        //     })
        // },

        getFirstDayOfWeek(date) {
            var day = date.getDay() || 7;
            return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + (date.getDate() + 1 - day);
        },
        toTimeTable(data) {
            let arr = [[[], [], [], [], [], [], [], [], [], [], [], []], [[], [], [], [], [], [], [], [], [], [], [], []], [[], [], [], [], [], [], [], [], [], [], [], []], [[], [], [], [], [], [], [], [], [], [], [], []], [[], [], [], [], [], [], [], [], [], [], [], []], [[], [], [], [], [], [], [], [], [], [], [], []], [[], [], [], [], [], [], [], [], [], [], [], []]];
            // let tar =  {
            //     "title": "课程名称7",
            //     "state": "已选中", //学时
            //     "teacher": "3.5", // 教师
            //     "time": "星期四第1-2节",
            //     "location": "博学楼",
            //     "week": "呵呵",
            //     "start": 1,
            //     "duration": 3,
            //     "date": 0 //星期几，0表示星期天，1表示星期一
            // }
            let timeRegExp = /(\d+)/g
            for (let i = 0; i < data.data.length; i++) {
                let startTime = data.data[i].time.match(timeRegExp)[0];
                let endTime = data.data[i].time.match(timeRegExp)[1];
                let title = data.data[i].course;
                let state = data.data[i].state;
                let teacher = data.data[i].teacher;
                let time = data.data[i].week + " " + startTime + "-" + endTime + "节";
                let location = data.data[i].location;
                let start = startTime;
                let duration = endTime - startTime + 1;
                let date = Number(data.data[i].date)

                for (let j = 0; j < 7; j++) {
                    if (date == 0) {
                        for (let k = 0; k < 12; k++) {
                            if ((startTime - 1) == k) {
                                let hasClass = true;
                                let week = data.data[i].week
                                if (week.substring(week.length - 2) == "单周" && data.weekID % 2 == 0) hasClass = false
                                if (week.substring(week.length - 2) == "双周" && data.weekID % 2 == 1) hasClass = false
                                let weekRegExpInc = /(\d+)/g
                                let courseTimeNumber = data.data[i].week.match(weekRegExpInc)
                                if (courseTimeNumber[0] > data.weekID || (courseTimeNumber[1] || courseTimeNumber[0]) < data.weekID) hasClass = false
                                arr[6][k].push({
                                    "title": title,
                                    "state": state,
                                    "teacher": teacher,
                                    "time": time,
                                    "location": location,
                                    "start": start,
                                    "duration": duration,
                                    "hasClass": hasClass
                                })
                                break;
                            }
                        }
                        continue
                    }

                    if (date - 1 == j) {
                        for (let k = 0; k < 12; k++) {
                            if ((startTime - 1) == k) {
                                let hasClass = true;
                                let week = data.data[i].week
                                if (week.substring(week.length - 2) == "单周" && data.weekID % 2 == 0) hasClass = false
                                if (week.substring(week.length - 2) == "双周" && data.weekID % 2 == 1) hasClass = false
                                let weekRegExpInc = /(\d+)/g
                                let courseTimeNumber = data.data[i].week.match(weekRegExpInc)
                                if (courseTimeNumber[0] > data.weekID || (courseTimeNumber[1] || courseTimeNumber[0]) < data.weekID) hasClass = false
                                arr[j][k].push({
                                    "title": title,
                                    "state": state,
                                    "teacher": teacher,
                                    "time": time,
                                    "location": location,
                                    "start": start,
                                    "duration": duration,
                                    "hasClass": hasClass
                                })
                                break;
                            }
                        }
                        break;
                    }
                }
            }

            return arr;
        },
        change(e) {
            this.showAdd = e.show
        },
        parserCourseTitle(title) {
            return title.length > 12 ? title.substring(0, 12) : title;
        },
        /**
         * 获取课程颜色
         * @param {Object} title 课程名
         */
        getCourseColor(title) {
            if (!this.colorMap.has(title)) {
                const colorArray = this.colorArray[this.colorArrayIndex];
                let size = this.colorMap.size;
                size = size >= colorArray.length ? 0 : size;
                this.colorMap.set(title, colorArray[size]);
            }
            return this.colorMap.get(title);
        },
        // 按住
        touchStart(e) {
            if (e.touches.length) {
                this.startX = e.touches[0].clientX;
            }
        },
        // 移动
        touchMove(e) {
            if (e.touches.length) {
                const moveX = e.touches[0].clientX;
                this.towards = this.startX - moveX;
            }
        },
        // 停止
        touchEnd(e) {
            // let currentWeekIndexTemp = this.currentWeekIndex;
            // const towards = this.towards;
            // if (towards !== 0) {
            //     if (towards < -100) {
            //         // 右滑，周索引--
            //         if (currentWeekIndexTemp !== 0) {
            //             currentWeekIndexTemp--;
            //         }
            //     } else if (towards > 100) {
            //         // 右滑，周索引++
            //         if (currentWeekIndexTemp !== 19) {
            //             currentWeekIndexTemp++;
            //         }
            //     }
            //     this.towards = 0;
            //     this.$store.commit('timetable/setCurrentWeekIndex', currentWeekIndexTemp);
            // }
        },
        /**
         * 显示/添加课程
         * @param {Object} dayItem 课程数据
         */
        showCourseDetail(dayItem) {
            if (dayItem.length) {
                this.showCourseCard = true;
                this.courseCardData = dayItem;
                // this.$refs.popup.open('bottom');
            } else {
                console.log('add');
                // this.$refs.popup.show("bottom")
                this.$refs.popup.open('bottom')
                // console.log(this.$refs);
            }

        },
        /**
         * 设置置顶
         * @param {Object} courseItem 置顶目标
         * @param {Object} courseItemIndex 需要置顶课程的索引
         */
        setCourseItemTop(courseItem, courseItemIndex) {
            const timetableListTemp = Array.from(this.timetableList);
            const { start, week, weeks } = courseItem;
            for (let i = 0; i < weeks.length; i++) {
                const dayDayCourse = timetableListTemp[weeks[i] - 1][week - 1][Number.parseInt(start / 2)];
                if (dayDayCourse.length > 1) {
                    const temp = dayDayCourse[courseItemIndex];
                    dayDayCourse.splice(courseItemIndex, 1);
                    dayDayCourse.unshift(temp);
                }
            }
            this.$store.commit('timetable/setTimetableList', timetableListTemp);
            uni.setStorageSync('timetable', timetableListTemp);
        },
        /**
         * 删除课程
         * @param {Object} courseItem 删除目标
         * @param {Object} courseItemIndex 需要删除课程的索引
         */
        deleteCourseItem(courseItem, courseItemIndex) {
            const timetableListTemp = Array.from(this.timetableList);
            const { start, week, weeks } = courseItem;
            uni.showModal({
                title: '警告',
                content: `确定删除该课程吗？\n此操作只会删除星期${week}的课时`,
                success: (res) => {
                    if (res.confirm) {
                        for (let i = 0; i < weeks.length; i++) {
                            timetableListTemp[weeks[i] - 1][week - 1][Number.parseInt(start / 2)].splice(
                                courseItemIndex,
                                1
                            );
                        }
                        this.$store.commit('timetable/setTimetableList', timetableListTemp);
                        uni.setStorageSync('timetable', timetableListTemp);
                        this.showCourseCard = !this.showCourseCard;
                    } else {
                        return;
                    }
                },
            });
        },
    },
};
</script>
  
<style lang="scss" scoped>
.button1 {

    background-color: transparent;
    border: 2rpx solid #fff;
    color: white;
    // padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 35rpx;
    position: relative;
    left: 125rpx;


}

.list {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    /* background-color: aquamarine; */
}

.list1 {
    color: #535353;
    font-family: SmileySans-Oblique;
    width: 400rpx;

}

#list2 {
    color: black;
    font-family: SmileySans-Oblique;

}

.bg-orange {
    background-color: #ff907d;
    color: #fff;
}

.text-orange {
    color: #ff907d;
}

.text-blue {
    color: #1798d9;
}

.text-gray {
    color: #666666;
}

.text-bold {
    font-weight: bold;
}

.timetable-main {
    background-size: cover;
    background-position: top center;

    .timetable-fixed {
        position: fixed;
        z-index: 100;
        width: 100%;
        top: 0;
        background-size: cover;
        background-position: top center;
    }
}

.timetable-week {
    background-color: #f1f1f1;
    color: #666666;
    height: 140rpx;
    display: flex;
    align-items: center;

    .week-nav {
        white-space: nowrap;

        .week-item {
            width: 132rpx;
            height: 120rpx;
            display: inline-block;

            .item-main {
                width: 96rpx;
                border-radius: 10rpx;
                margin: 0 auto;
                padding: 8rpx 0;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;

                &.original {
                    background-color: #c8c7cc;
                }

                &.current {
                    background-color: #ffffff;
                }

                .main-week {
                    font-size: 20rpx;
                    text-align: center;
                    margin-bottom: 8rpx;
                }

                .main-body {
                    width: 70rpx;
                    height: 70rpx;
                    display: flex;
                    justify-content: space-evenly;

                    .body-item {
                        width: 10rpx;
                        height: 70rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;

                        .item-dot {
                            width: 10rpx;
                            height: 10rpx;
                            border-radius: 50%;

                            &.true {
                                background-color: #3fd0a9;
                            }

                            &.false {
                                background-color: #dcdcdc;
                            }
                        }
                    }
                }
            }
        }
    }
}

.timetable-time {
    display: flex;
    height: 80rpx;
    font-size: 25rpx;

    &-left {
        width: 9vw;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    &-right {
        width: 91vw;
        display: flex;

        .day-item {
            text-align: center;
            font-size: 24rpx;
            width: calc(13vw - 8rpx);
            margin: 4rpx;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .cur {
            width: 80%;
            color: #ff907d;
            border-bottom: 8rpx solid #ff907d;
        }
    }
}

.timetable-body {
    display: flex;

    &-left {
        width: 9vw;

        &-time {
            height: 120rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 20rpx;
        }
    }

    &-right {
        width: 91vw;
        color: #ffffff;
        position: relative;
        font-size: 20rpx;
    }
}

.timetable-item {
    position: absolute;
    width: 13vw;
    z-index: 10;
    // opacity: 0.8;

    &-content {
        margin: 4rpx;
        border-radius: 10rpx;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        .twice-course {
            width: 70rpx;
            height: 8rpx;
            margin: 0 auto;
            background-color: #ffffff;
            position: absolute;
            bottom: 10rpx;
            border-radius: 5rpx;
            opacity: 0.7;
        }
    }
}

.blank {
    height: 240rpx;
    z-index: 5;
}

.course-card {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .mask {
        position: absolute;
        width: 100%;
        height: 120%;
        top: 0;
        left: 0;
        z-index: 105;
        background: rgba(0, 0, 0, 0.4);
    }

    .course-item {
        margin: 30rpx 40rpx;
        padding: 30rpx;
        border-radius: 20rpx;
        animation: card 0.2s ease-in;
        z-index: 200;
        color: #ffffff;
        line-height: 1.6em;

        .course-title {
            padding: 20rpx 0;
            text-align: center;
            font-size: 36rpx;
        }

        .course-other {
            padding: 10rpx 20rpx;

            &-item {
                font-size: 32rpx;
            }
        }

        .course-action {
            width: 50%;
            padding: 10rpx 20rpx;
            font-size: 42rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
                font-size: 32rpx;
            }
        }
    }

    @keyframes card {
        0% {
            transform: rotateY(-90deg);
        }

        100% {
            transform: rotateY(0);
        }
    }
}
.list-input{
    text-align: right;
    margin-right: 40rpx;
}
</style>
  